<template>
	<view class="page">
		<view class="logo-container">
			<image class="logo" src="/static/logo.png"></image>
		</view>

		<view class="background">
			<view class="info">
				<view class="item">
					<text class="title">姓名*</text>
					<view class="input-box">
						<input type="text" placeholder="请输入姓名" v-model="name" />
					</view>
				</view>

				<view class="item">
					<text class="title">手机号码*</text>
					<view class="input-box">
						<input type="number" placeholder="请输入手机号" v-model="phoneNumber" />
					</view>
				</view>

				<view class="item">
					<text class="title">公司名称</text>
					<view class="input-box">
						<input type="text" v-model="companyName" />
					</view>
				</view>

				<view class="item">
					<text class="title">来宾数量*</text>
					<view class="input-box">
						<input type="number" v-model="guestCount" maxlength="2" />
					</view>
				</view>

				<view class="place">
					<text class="title">选择地点*</text>
					<view class="place-box">
						<view class="place-item">
							<uni-data-checkbox mode="list" multiple v-model="value" :localdata="range">
							</uni-data-checkbox>
						</view>
					</view>
				</view>
			</view>

			<view class="button-container">
				<navigator url="/pages/index/index">
					<button class="cancel">
						<text>CANCEL</text>
					</button>
				</navigator>

				<view>
					<button class="confirm" @click="postInfo()">
						<text>CONFIRM→</text>
					</button>
				</view>


			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { rules } from './rules.js';

const value = ref([]);
const range = ref([]);

const name = ref('');
const phoneNumber = ref('');
const companyName = ref('');
const guestCount = ref(0);

const getPlaceList = () => {
	uni.request({
		url: 'https://laravels.materialcost.cn/api/register/getLocationList',
		success: (res) => {
			range.value = res.data.data.map(item => ({
				value: item.location_id,
				text: item.location_name
			}))
		}
	})
}

const postInfo = () => {

	const data = {
		contact_name: name.value,
		contact_phone: phoneNumber.value,
		guest_count: guestCount.value,
		contact_company: companyName.value,
		locations_ids: value.value
	};

	if (guestCount.value > 20) {
		guestCount.value = 20;
		uni.showToast({
			title: '来宾数量不能超过20人',
			icon: 'none',
		});
		return;
	}

	if (
		!rules.NameRules(name.value) ||
		!rules.PhoneNumberRules(phoneNumber.value) ||
		!rules.CompanyNameRules(companyName.value) ||
		!rules.GuestCountRules(guestCount.value) ||
		!rules.SelectedAddressesRules(value.value)) {
		return;
	}

	uni.request({
		url: 'https://laravels.materialcost.cn/api/register/create',
		method: 'POST',
		data: data,
		success: (res) => {
			console.log(res.data);
			uni.showToast({
				title: '提交成功',
				duration: 2000
			});

			name.value = '';
			phoneNumber.value = '';
			companyName.value = '';
			guestCount.value = 0;
			value.value = [];
		}
	});
}

onMounted(() => {
	getPlaceList()
})
</script>

<style lang="scss">
.page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.logo {
	width: 129px;
	height: 42px;
	margin: 60rpx 0rpx;

}

.logo-container {
	height: 15vh;
}

.background {
	width: 100%;
	height: 75vh;
	background-image: url("/static/BG.png");
	margin: 20px;
}

.info {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 80px;
}

.item {
	width: 78%;
	height: 68px;
	background-color: white;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

	.title {
		width: 100px;
	}

	.input-box {
		// background-color: pink;
		display: flex;
		justify-content: center;
		flex: 1;

		input {
			// background-color: greenyellow;
			text-align: center;
		}
	}
}

.place {
	width: 78%;
	height: 204px;
	background-color: white;
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	// align-items: center;
	padding: 20px;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

	.title {
		margin-bottom: 16px;
	}

}

.place-box {
	// background-color: pink;
	height: 100%;
	overflow: auto;
}

.button-container {
	margin: 0 50px;
	display: flex;
	justify-content: space-between;

	.cancel,
	.confirm {
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30px;

		text {
			font-size: 24px;
			color: white;

		}

	}

	.cancel {
		background-color: #8a8a8a;
	}

	.confirm {
		background-color: #e85419;

	}
}
</style>